<template>
  <view class="page">
    <view class="login-container">
      <!-- 顶部区域 -->
      <view class="header">
        <view class="header-content">
          <image class="logo" :src="userAvatar" mode="aspectFit" />
          <view class="text-group">
            <text class="title">{{ nickname }}</text>
            <text class="subtitle">账号：{{ username }}</text>
          </view>
        </view>
      </view>
      <!-- 功能列表区域 -->
      <view class="menu-card">
        <view class="menu-content">
          <view class="menu-item" v-for="(item, index) in menuList" :key="index" @click="handleMenuClick(item)">
            <text class="menu-text">{{ item.text }}</text>
            <uni-icons type="right" size="16" color="#CCCCCC" />
          </view>
        </view>
        <view class="button-wrapper" @click="handleLogin">
          退出登录
          <!-- <button class="login-button" @click="handleLogin"></button> -->
        </view>
      </view>
    </view>
    <myTabbar :jumpType="currentIndex"></myTabbar>
    <uni-popup ref="popup" background-color="#fff" @change="change">
      <view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
        <view class="tip-title">提示</view>
        <view class="message-text">确定要退出?</view>
        <view class="cancel-btn" @click="closePop">取消</view>
        <view class="confirm-btn" @click="confirm">确定</view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { mapGetters } from 'vuex';
import {
  getUserInfo
} from '@/api/user.js';
import myTabbar from '@/components/tabBar/myTabbar.vue';
export default {

  computed: mapGetters(['isLogin']),
  components: {
    myTabbar
  },
  data() {
    return {
      backIcon: this.$common.imgUrl() + '/img/back.png',
      userAvatar: '/static/avatar.png',
      nickname: '用户名称',
      username: 'xxxxxx',
      info: {},
      pagePaddingTop: 0,
      logoUrl: this.$common.imgUrl() + '/images/logo@2x.png',
      currentIndex: 'intake_my',
      menuList: [
        { text: '编辑资料', key: 'edit' },
        { text: '设置', key: 'settings' },
        { text: '关于我们', key: 'about' },
        { text: '检查更新', key: 'update' }
      ],
      type: 'center',
      msgType: 'success',
      messageText: '这是一条成功提示',
      value: ''
    }
  },
  onShow() {
    this.getUserInfo();
  },
  methods: {
    handleMenuClick(e) {
      if (e.key === 'edit') {
        uni.navigateTo({
          url: '/pages/users_purchasing/user_info/index',
        })
      } else if (e.key === 'settings') {
        uni.navigateTo({
          url: '/pages/user/setting',
        })
      } else if (e.key === 'update') {
        uni.showToast({
          title: '暂无更新',
          icon: 'none',
        });
      }else{}
    },
    goMenuPage(url) {
      console.log(url)
      uni.navigateTo({
        url: url,
        fail(err) {
          // uni.switchTab({
          //   url: url
          // })
        }
      })
    },
    /**
    * 获取个人用户信息
    */
    getUserInfo: function () {
      let that = this;
      getUserInfo().then(res => {
        let tel = res.data.mobile;
        let phone = tel.substr(0, 3) + "****" + tel.substr(7);
        // that.$set(that, 'userInfo', res.data);
        that.nickname = res.data.nickname;
        that.username = phone;
        that.scoreCount = (res.data.integral ?? 0);
        console.log('========',that.nickname)
      });
    },
    onProductTap() { },
    handleLogin() {
      this.$refs.popup.open()
    },
    closePop() {
      this.$refs.popup.close()
    },
    confirm() {
      // uni.clearStorageSync();
      this.$store.commit("LOGOUT");
      this.$store.commit('LOGIN', {
        token: null,
        time: null
      });
      this.$store.commit('SETUID', null);
      this.$store.commit("UPDATE_USERINFO", null);
      this.$store.commit("UPDATE_USERINFO_ROLE", null);
      uni.reLaunch({
        url: '/pages/login/index'
      });
    }
  }
}
</script>
<style>
page {
  height: 100%;
}

.page {
  height: 100%;
  background-color: #f5f5f5;
}

.login-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.header {
  height: 400rpx;
  background: linear-gradient(to bottom, #00C1FF 0%, #034EFD 100%);
  padding: 48rpx 32rpx;
}

.header-content {
  display: flex;
  align-items: flex-start;
  margin-bottom: 24rpx;
  margin-top: 161rpx;
}

.logo {
  width: 113rpx;
  height: 113rpx;
  margin-right: 20rpx;
}

.title {
  color: #FFFFFF;
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 8rpx;
}

.text-group {
  display: flex;
  flex-direction: column;
  margin-left: 20rpx;
  margin-top: 10rpx;
}

.subtitle {
  color: #FFFFFF;
  font-size: 14px;
  opacity: 0.9;
  margin-top: 8rpx;
}

.menu-card {
  height: calc(100% - 200rpx);
  background: #F5F9FF;
  border-radius: 30rpx;
  margin: -20rpx 0 0;
  padding: 62rpx 30rpx;
}

.menu-content {
  width: 690rpx;
  height: 353rpx;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 10rpx;
}

.menu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 88rpx;
  padding: 20rpx;

  /* border-bottom: 1px solid #EEEEEE; */
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-text {
  font-size: 24rpx;
  color: #333333;
}

.button-wrapper {
  margin: 48rpx 32rpx;
  width: 690rpx;
  height: 69rpx;
  line-height: 69rpx;
  background: #fff;
  font-size: 24rpx;
  border-radius: 10rpx;
  margin: 48rpx 0;
  padding: 0 20rpx;
}

.login-button {
  width: 690rpx;
  height: 69rpx;
  line-height: 69rpx;
  background: #fff;
  font-size: 24rpx;
  border-radius: 10rpx;
  margin-left: -30rpx;
}

wx-button {
  background-color: #fff;
}

.login-button:active {
  opacity: 0.8;
}
</style>
<style lang="scss" scoped>
.popup-content {
  // @include flex;
  width: 586rpx;
  height: 294rpx;
  background-color: #fff;
  border-radius: 10rpx;
  padding: 46rpx 35rpx;

  .tip-title {
    font-size: 36rpx;
    font-weight: 550;
  }

  .message-text {
    margin: 30rpx 0;
    font-size: 24rpx;
    color: #333;
  }

  .cancel-btn {
    border: solid 1px #034EFD;
    border-radius: 40rpx;
    text-align: center;
    width: 227rpx;
    height: 69rpx;
    line-height: 69rpx;
    float: left;
    color: #034EFD;
    margin-right: 50rpx;
  }

  .confirm-btn {
    background-color: #034EFD;
    border-radius: 40rpx;
    text-align: center;
    width: 227rpx;
    height: 69rpx;
    line-height: 69rpx;
    float: left;
    color: #fff;
  }
}
</style>